<template>
  <div class="news">
    <Header></Header>
    <div class="topbg"></div>
    <div class="wrap main">
      <!-- <Tabs class="tab_title"></Tabs> -->
      <div class="news_tab">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="公司新闻" name="first">
            <div class="news_lists">
              <img src="@/assets/images/new_pic.png" alt="" class="pic" />
              <div class="content">
                <div class="news_content">
                  <h4>公司新闻标题一-这里是标题</h4>
                  <p class="col9">
                    新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内
                  </p>
                </div>
                <div class="news_data col9">
                  <span class="riqi">07-22</span>
                  <span class="font20">2020</span>
                </div>
                <a href="#/newsDetails" class="arrow"></a>
              </div>
            </div>
            <div class="news_lists">
              <img src="@/assets/images/new_pic.png" alt="" class="pic" />
              <div class="content">
                <div class="news_content">
                  <h4>公司新闻标题一-这里是标题</h4>
                  <p class="col9">
                    新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内
                  </p>
                </div>
                <div class="news_data col9">
                  <span class="riqi">07-22</span>
                  <span class="font20">2020</span>
                </div>
                <a href="#" class="arrow"></a>
              </div>
            </div>
            <div class="news_lists">
              <img src="@/assets/images/new_pic.png" alt="" class="pic" />
              <div class="content">
                <div class="news_content">
                  <h4>公司新闻标题一-这里是标题</h4>
                  <p class="col9">
                    新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内
                  </p>
                </div>
                <div class="news_data col9">
                  <span class="riqi">07-22</span>
                  <span class="font20">2020</span>
                </div>
                <a href="#" class="arrow"></a>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="行业资讯" name="second">行业资讯</el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="wrap pagination">
      <el-pagination background layout="prev, pager, next" :total="100">
      </el-pagination>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Tabs from "@/components//Tabs.vue";
import Header from "@/components/layout/header.vue";
import Footer from "@/components/layout/footer.vue";
export default {
  components: {
    Header,
    Footer,
    Tabs,
  },
  data() {
    return {
      activeName: "first",
      contents: [],
    };
  },
  mounted(){

  },
  methods:{
    handleClick(val) {
      let name = val.name;
      // console.log(name);
      // if ((name == "first")) {
      //   this.videoList();
      // } else {
      //   this.commentList();
      // }
    },
  }
};
</script>
<style lang="" scoped>
.topbg {
  background: url(../../assets/images/news_banner.png) no-repeat;
  background-size: cover;
  height: 379px;
  position: relative;
  z-index: 0;
}
/* .tab_title {
  margin-top: -20px;
} */
.main {
  position: relative;
  top: -69px;
}
.news_lists {
  width: 100%;
  display: flex;
  margin-bottom: 30px;
}
.pic {
  width: 200px;
  height: 116px;
}
.content {
  display: flex;
  flex: 1;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
  margin-left: 20px;
  padding-bottom: 20px;
}
.content .news_content {
  width: 670px;
  border-right: 2px solid #f2f2f2;
}
.content .news_content h4 {
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 20px;
}
.content .news_data {
  width: 120px;
  padding: 0 30px;
}
.content .news_data .riqi {
  font-size: 40px;
  font-weight: 700;
  display: block;
  margin-bottom: 20px;
}
.arrow {
  width: 20px;
  height: 20px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: rotate(45deg);
}
.pagination {
  text-align: center;
  margin-bottom: 30px;
}
</style>
<style>
.news_tab .el-tabs__nav-wrap::after,
.el-tabs__active-bar {
  background-color: transparent;
}
.news_tab .el-tabs__item{
  height: 70px;
  line-height: 50px;
  padding: 10px 30px!important;
}
.news_tab .el-tabs__item.is-active {
  background-color: #0099ff;
  color: #fff;
}
.news_tab .el-tabs__header{
  background: #fff;
  margin:0 auto ;
}
.news_tab .el-tabs__content{
      margin-top: 50px;
}
</style>